<!-- @format -->

<template>
    <div class="ma-content-block" style="height:100%">
        <div class="flex flex_column" style="width:100%;height:100%;background:#fff;border-radius:10px;padding:12px" >
            <div class="flex align_center justify_between marbot14">
                <div class="flex align_center ">
                <div style="font-size:16px;line-height:24px;font-weight:600;margin-right:20px">{{itemData?.dept?.name}}</div>
                <div style="color:rgba(0, 0, 0, 0.6)">车号：{{itemData?.car_no}}</div>
                </div>
                <a-tag bordered :color="itemData.prediciont_status == 0?'orangered':'green'">
                    {{itemData.prediciont_status == 0?'未发运':'已发运'}}
                </a-tag>
            </div>
            <!-- 选项卡列表 -->
            <div class="flex marbot14" style="border-bottom:1px solid rgba(0, 0, 0, 0.15)">
                <div class="flex_1 flex align_center justify_center flex_column cursor" :class="props.tabs == 'jc'?'activetabs':''" style='padding:12px 0' @click="handleTabs('jc')">
                <img src="/public/tipIcon.svg" style="width:44px;height:44px;border-radius:10px" />
                <div style="font-size:14px;font-weight:500;color:rgba(0, 0, 0, 0.9);margin-top:4px">基础信息</div>
                </div>
                <div class="flex_1 flex align_center justify_center flex_column cursor" :class="props.tabs == 'zd'?'activetabs':''" style='padding:12px 0' @click="handleTabs('zd')">
                <img src="/public/tipZhang.svg" style="width:44px;height:44px;border-radius:10px" />
                <div style="font-size:14px;font-weight:500;color:rgba(0, 0, 0, 0.9);margin-top:4px">账单</div>
                </div>
                <div class="flex_1 flex align_center justify_center flex_column cursor" :class="props.tabs == 'cb'?'activetabs':''" style='padding:12px 0' @click="handleTabs('cb')">
                <img src="/public/tipZhang.svg" style="width:44px;height:44px;border-radius:10px" />
                <div style="font-size:14px;font-weight:500;color:rgba(0, 0, 0, 0.9);margin-top:4px">成本账单</div>
                </div>
                <div class="flex_1 flex align_center justify_center flex_column cursor" :class="props.tabs == 'xc'?'activetabs':''" style='padding:12px 0' @click="handleTabs('xc')">
                <img src="/public/tipXun.svg" style="width:44px;height:44px;border-radius:10px" />
                <div style="font-size:14px;font-weight:500;color:rgba(0, 0, 0, 0.9);margin-top:4px">巡查记录</div>
                </div>
                <div class="flex_1 flex align_center justify_center flex_column cursor" :class="props.tabs == 'bj'?'activetabs':''" style='padding:12px 0' @click="handleTabs('bj')">
                <img src="/public/tipXiu.svg" style="width:44px;height:44px;border-radius:10px" />
                <div style="font-size:14px;font-weight:500;color:rgba(0, 0, 0, 0.9);margin-top:4px">编辑记录</div>
                </div>
                <!-- <div class="flex_1 flex align_center justify_center flex_column cursor" :class="props.tabs == 'xg'?'activetabs':''" style='padding:12px 0' @click="handleTabs('xg')">
                <img src="/public/tipXiuKG.svg" style="width:44px;height:44px;border-radius:10px" />
                <div style="font-size:14px;font-weight:500;color:rgba(0, 0, 0, 0.9);margin-top:4px">重量修改记录</div>
                </div> -->
            </div>
            <!-- 基础信息 -->
            <div class="flex_1 scllBox" v-if="props.tabs == 'jc'" style="padding:12px">
                <div style="padding:4px 10px;border-radius:6px;background:rgba(246, 246, 246, 1)" class="font14 bule marbot12">基础信息</div>
                <div class="flex justify_between">
                  <div class="flex flex_1" style='margin-bottom:20px'>
                    <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>车种</div>
                    <div>{{itemData?.car_type}}</div>
                  </div>
                  <div class="flex flex_1" style='margin-bottom:20px'>
                    <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>车号</div>
                    <div>{{itemData?.car_no}}</div>
                  </div>
                  
                </div>
                <div class="flex justify_between">
                  <div class="flex  flex_1" style='margin-bottom:20px'>
                      <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>客户名称</div>
                      <div>{{itemData?.dept?.name}}</div>
                  </div>
                  <div class="flex  flex_1" style='margin-bottom:20px'>
                      <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>合同名称</div>
                      <div>{{itemData?.contract?.name}}</div>
                  </div>
                </div>
                <div class="flex justify_between">
                  <div class="flex flex_1" style='margin-bottom:20px'>
                    <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>运单号</div>
                    <div>{{itemData?.yundanhao}}</div>
                  </div>
                  <div class="flex flex_1" style='margin-bottom:20px'>
                    <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>合同号</div>
                    <div>{{itemData?.contract_no}}</div>
                  </div>
                </div>
                
                <div class="flex justify_between">
                  <div class="flex flex_1" style='margin-bottom:20px'>
                    <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>原始凭证号</div>
                    <div>{{itemData?.batch_no}}</div>
                  </div>
                  <div class="flex flex_1" style='margin-bottom:20px'>
                    <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>是否仓储</div>
                    <div>{{itemData?.serve_type == 1?'仓储':itemData?.serve_type == 2?'配送':itemData?.serve_type == 3?'非仓储':''}}</div>
                  </div>
                </div> 
                <div class="flex justify_between">
                  <!-- <div class="flex flex_1" style='margin-bottom:20px'>
                    <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>是否对装</div>
                    <div>{{itemData?.butt_type == 1?'对装':itemData?.butt_type == 2?'非对装':'未知'}}</div>
                  </div> -->
                  <div class="flex flex_1" style='margin-bottom:20px'>
                    <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>发到站</div>
                    <div>{{itemData.fzs?.name}} {{ itemData.dzs?.name }}</div>
                  </div>
                  <div class="flex flex_1" style='margin-bottom:20px'>
                    <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>运输方式</div>
                    <div>{{itemData?.transport_type == 1?'集装箱':itemData?.transport_type == 2?'整车':'批量快运'}}</div>
                  </div>
                </div>
                <div class="flex justify_between">
                  <div class="flex flex_1" style='margin-bottom:20px'>
                    <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>收货人</div>
                    <div>{{itemData?.shipper}}</div>
                  </div>
                  <div class="flex flex_1" style='margin-bottom:20px'>
                    <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>收货人电话</div>
                    <div>{{itemData?.shipper_phone}}</div>
                  </div>
                </div>
                <div class="flex justify_between">
                  <div class="flex flex_1" style='margin-bottom:20px'>
                    <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>托运经办人</div>
                    <div>{{itemData?.customer_handler}}</div>
                  </div>
                  <div class="flex flex_1" style='margin-bottom:20px'>
                    <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>托运电话</div>
                    <div>{{itemData?.customer_tel}}</div>
                  </div>
                </div>
                
                <div class="flex justify_between">
                  
                  <div class="flex flex_1" style='margin-bottom:20px'>
                    <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>发站专用线</div>
                    <div>{{itemData?.sending_station_special}}</div>
                  </div>
                  <div class="flex flex_1" style='margin-bottom:20px'>
                    <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>到站专用线</div>
                    <div>{{itemData?.arrive_station_special}}</div>
                  </div>
                </div>
                <div class="flex justify_between">
                  <div class="flex flex_1" style='margin-bottom:20px'>
                    <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>车厢位置</div>
                    <div>{{itemData?.transport_number}}</div>
                  </div>
                  <div class="flex flex_1" style='margin-bottom:20px'>
                    <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>状态</div>
                    <div :style="{color:itemData?.prediciont_status == 0?'orangered':'green'}">· {{itemData?.prediciont_status == 0?'未发运':'已发运'}}</div>
                  </div>
                </div>
                <div class="flex justify_between">
                  <div class="flex flex_1" style='margin-bottom:20px'>
                    <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>作业线路</div>
                    <div>{{itemData?.work_line}}</div>
                  </div>
                  <div class="flex flex_1" style='margin-bottom:20px'>
                    <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>装卸任务</div>
                    <div>{{itemData?.load == 3?'无':itemData?.load == 2?'未完成':'已完成'}}</div>
                  </div>
                </div>
                <div class="flex justify_between">
                  <div class="flex flex_1" style='margin-bottom:20px'>
                    <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>操作人</div>
                    <div>{{itemData?.create_user?.nickname}}</div>
                  </div>
                  <div class="flex flex_1" style='margin-bottom:20px'>
                    <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>支付状态</div>
                    <div :style="{color:itemData?.prediction_pay_status == 0?'orangered':'green'}">· {{itemData?.prediction_pay_status == 0?'待支付':"已支付"}}</div>
                  </div>
                </div>
                <div class="flex justify_between">
                  <div class="flex flex_1" style='margin-bottom:20px'>
                    <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>创建时间</div>
                    <div>{{itemData?.created_at}}</div>
                  </div>
                  <div class="flex flex_1" style='margin-bottom:20px'>
                    <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>巡查状态</div>
                    <div :style="{color:itemData?.check_status == 0?'gray':temData?.check_status == 1?'green':'red'}">· {{itemData?.check_status == 0?'未巡查':itemData?.check_status == 1?'正常':"异常"}}</div>
                  </div>
                </div>
                <div class="flex justify_between">
                  <div class="flex flex_1" style='margin-bottom:20px'>
                    <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>发运时间</div>
                    <div>{{itemData?.send_time}}</div>
                  </div>
                  <div class="flex flex_1" style='margin-bottom:20px'>
                    <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>剩余件数/重量</div>
                    <div>{{itemData?.numbers || 0}}件/{{itemData?.weights || '0.000'}}吨</div>
                  </div>
                </div>
                <div class="flex justify_between" v-if="itemData?.service_type == 2 || itemData?.service_type == 4">
                  <div class="flex flex_1" style='margin-bottom:20px'>
                    <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>送货电话</div>
                    <div>{{itemData?.peisong_address.mobile}}</div>
                  </div>
                  <div class="flex flex_1" style='margin-bottom:20px'>
                    <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>送货地址</div>
                    <div>{{itemData?.peisong_address.address}}</div>
                  </div>
                </div>
                <div class="flex justify_between">
                      <div class="flex flex_1" style='margin-bottom:20px'>
                        <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>服务方式</div>
                        <div v-if="itemData.service_type != null && itemData.service_type == 2">站到门</div>
                        <div v-if="itemData.service_type != null && itemData.service_type == 4">门到门</div>
                        <div v-if="itemData.service_type != null && itemData.service_type == 3">门到站</div>
                        <div v-if="itemData.service_type != null && itemData.service_type == 1">站到站</div>
                      </div>
                      <div class="flex flex_1" style='margin-bottom:20px'>
                        <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>办理时间</div>
                        <div>{{itemData?.process_time}}</div>
                      </div>
                </div>
                <div class="flex justify_between">
                      <div class="flex flex_1" style='margin-bottom:20px'>
                        <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>装车时间</div>
                        <div>{{itemData?.load_time}}</div>
                      </div>
                  </div>
                <div v-if="itemData.goods_data == null">
                  <div style="padding:4px 10px;border-radius:6px;background:rgba(246, 246, 246, 1)" class="font14 bule marbot12">品名信息</div> 
                  <div class="flex justify_between">
                    <div class="flex flex_1" style='margin-bottom:20px'>
                      <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>品名</div>
                      <div>{{itemData?.goods_name}}</div>
                    </div>
                    <div class="flex flex_1" style='margin-bottom:20px'>
                      <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>件数</div>
                      <div>{{itemData?.number_yu || 0}}件</div>
                    </div>
                  </div>
                  <div class="flex justify_between">
                    <div class="flex flex_1" style='margin-bottom:20px'>
                      <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>货重</div>
                      <div>{{itemData?.hz_weight || '0.000'}}吨</div>
                    </div>
                    <div class="flex flex_1" style='margin-bottom:20px'>
                      <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>计费重量</div>
                      <div>{{itemData?.jf_weight || '0.000'}}吨</div>
                    </div>
                  </div>
                  
                  <div class="flex justify_between">
                    <div class="flex flex_1" style='margin-bottom:20px'>
                      <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>承运人重量</div>
                      <div>{{itemData?.cyr_weight || '0.000'}}吨</div>
                    </div>
                    <div class="flex flex_1" style='margin-bottom:20px'>
                      <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>标重</div>
                      <div>{{itemData?.bz_weight || '0.000'}}吨</div>
                    </div>
                  </div>
                  
                  <div style="padding:4px 10px;border-radius:6px;background:rgba(246, 246, 246, 1)" class="font14 bule marbot12" v-if="itemData?.transport_type == 1">集装箱信息</div>
                  <div class="flex justify_between" v-if="itemData?.transport_type == 1">
                    <div class="flex flex_1" style='margin-bottom:20px' >
                      <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>箱号</div>
                      <div>{{itemData?.box}}</div>
                    </div>
                    <div class="flex flex_1" style='margin-bottom:20px' >
                      <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>箱型箱类</div>
                      <div>{{itemData?.box_type}}</div>
                    </div>
                  </div>
                  <div class="flex justify_between" v-if="itemData?.transport_type == 1">
                    <div class="flex flex_1" style='margin-bottom:20px' >
                      <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>箱属</div>
                      <div>{{itemData?.box_belong}}</div>
                    </div>
                    <div class="flex flex_1" style='margin-bottom:20px'>
                      <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>空重箱状态</div>
                      <div>{{itemData?.is_empty==1?'空箱':'重箱'}}</div>
                    </div>
                  </div>
                </div>
                <div v-else>
                  <div  v-for="(items,indexs) in itemData.goods_data" :key="indexs">
                    <div style="padding:4px 10px;border-radius:6px;background:rgba(246, 246, 246, 1)" class="font14 bule marbot12">货物信息{{indexs + 1}}</div> 
                    <div class="flex justify_between">
                      <div class="flex flex_1" style='margin-bottom:20px'>
                        <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>品名</div>
                        <div>{{handleGoodName(items?.goods_id)}}</div>
                      </div>
                      <div class="flex flex_1" style='margin-bottom:20px'>
                        <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>件数</div>
                        <div>{{items?.number_yu || 0}}件</div>
                      </div>
                    </div>
                    <div class="flex justify_between">
                      <div class="flex flex_1" style='margin-bottom:20px'>
                        <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>货重</div>
                        <div>{{items?.hz_weight || '0.000'}}吨</div>
                      </div>
                      <div class="flex flex_1" style='margin-bottom:20px'>
                        <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>计费重量</div>
                        <div>{{items?.jf_weight || '0.000'}}吨</div>
                      </div>
                    </div>
                    <div class="flex justify_between">
                      <div class="flex flex_1" style='margin-bottom:20px'>
                        <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>承运人重量</div>
                        <div>{{items?.cyr_weight || '0.000'}}吨</div>
                      </div>
                      <div class="flex flex_1" style='margin-bottom:20px'>
                        <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>标重</div>
                        <div>{{items?.bz_weight || '0.000'}}吨</div>
                      </div>
                    </div>
                    <div class="flex justify_between" v-if="itemData.transport_type == 1">
                      <div class="flex flex_1" style='margin-bottom:20px'>
                        <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>箱号</div>
                        <div>{{items?.box || ''}}</div>
                      </div>
                      <div class="flex flex_1" style='margin-bottom:20px'>
                        <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>箱型箱类</div>
                        <div>{{items?.box_type || ''}}</div>
                      </div>
                    </div>
                    <div class="flex justify_between" v-if="itemData.transport_type == 1">
                      <div class="flex flex_1" style='margin-bottom:20px'>
                        <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>箱属</div>
                        <div>{{items?.box_belong || ''}}</div>
                      </div>
                      <div class="flex flex_1" style='margin-bottom:20px'>
                        <div style='width:120px;color:rgba(0, 0, 0, 0.4)'>空重状态</div>
                        <div>{{items?.is_empty == 1?'空箱':'重箱'}}</div>
                      </div>
                    </div>
                    
                    
                  </div>
                </div>
            </div>
            <!-- 账单 -->
            <div class="flex_1" v-show="tabs == 'zd'">
                <div class="flex flex_column"  style="height:100%">
                    <div class="flex align_center justify_end marbot12">
                        <div class="flex">
                            <a-button type="primary" style="margin-right:16px;" @click='handlezhangdancaozuo("4")'>冲红账单</a-button>
                        </div>
                        <div class="flex">
                            <a-button type="primary" style="margin-right:16px;" @click='handlezhangdancaozuo("3")'>修改账单</a-button>
                        </div>
                        <div class="flex">
                            <a-button type="primary" style="margin-right:16px;" @click='handlezhangdancaozuo("2")'>打印收据</a-button>
                        </div>
                        <div class="flex">
                            <a-button type="primary" style="margin-right:16px;" @click='handlezhangdancaozuo("1")'>批量支付</a-button>
                        </div>
                        <div class="flex">
                            <a-button type="primary" style="" @click='handleChuangjian'>创建账单</a-button>
                        </div>
                    </div>
                    <div class="flex_1" ref="zdScroll" style="position:relative">
                        <a-scrollbar style="overflow: auto;" :style="{height:zdScrollHeight + 'px'}" @scroll='handlezdScroll'>
                        <OrderShowItems ref="orderShowItemsRef" :zhangdancaozuo="zhangdancaozuo" :list="billList" :zhifuShow="zhifuShow" @shuaxin='handlePayOrderIndexs' @zhifushows="zhifuShowFun" @chuanList="handlechuanList"></OrderShowItems>
                        </a-scrollbar>
                        <div v-if="zhangdanloading" style="position: absolute;width:100%;height:100%;background:rgba(31, 108, 235, 0.04);z-index:10;display:flex;top:0;left:0;justify-content: center;align-items: center;">
                            <a-spin dot :size="10" />
                        </div>
                    </div>
                    <div class="flex justify_between align_center" style="margin-top: 12px;" v-if="zhangdancaozuo">
                      <div class="flex align_center" @click="handleZhangdancaozuozoon">
                        <div style="margin-right: 8px;">
                          <div class="flex align_center justify_center " style="width:16px;height:16px;border-radius:2px;border:1px solid rgba(0,0,0,.15)" v-if="!zhangdancaozuozoon"></div>
                          <div class="flex align_center justify_center" style="width:16px;height:16px;border-radius:2px;border:1px solid rgba(31, 108, 235, 1);background:rgba(31, 108, 235, 1);" v-if="zhangdancaozuozoon">
                            <icon-check style="color:#fff" />
                          </div>
                        </div>
                        <div>全选</div>
                      </div>
                      <div class="flex ">
                        <div>已选{{ yixuanList.length }}项 </div>
                        <div style="margin-left: 8px;" v-if="zhangdancaozuo == 1">
                          合计支付金额{{xuanzhongPrice}}
                        </div>
                      </div>
                      <div class="flex ">
                        <a-button  style="margin-right:16px;" @click='handleXuanzhongQuxiao'>取消</a-button>
                        <a-button type="primary"  @click='handleZhifu' v-if="zhangdancaozuo == 1" >支付</a-button>
                        <a-button type="primary"  @click='handleShouju' v-if="zhangdancaozuo == 2" >预览收据</a-button>
                        <a-button type="primary"  @click='handlexiugaizhangdan' v-if="zhangdancaozuo == 3" >修改账单</a-button>
                      </div>
                    </div>
                </div>
            </div>
            <!-- 成本账单 -->
            <div class="flex_1" v-show="tabs == 'cb'">
                <div class="flex flex_column"  style="height:100%">
                    <div class="flex align_center justify_end marbot12">
                        <!-- <div class="flex">
                            <a-button type="primary" style="margin-right:16px;" @click='handleZhifu'>批量支付</a-button>
                        </div> -->
                        <div class="flex">
                            <a-button type="primary" style="" @click='handleChuangjianCB'>创建账单</a-button>
                        </div>
                    </div>
                    <div class="flex_1" ref="cbzdScroll" style="position:relative">
                        <a-scrollbar style="overflow: auto;" :style="{height:cbzdScrollHeight + 'px'}" @scroll='handlecbzdScroll'>
                        <cbOrderShowltems ref="orderShowItemscbRef" :list="billListcb" :zhifuShow="zhifucbShow" @shuaxin='handlePayOrderIndexscb' @zhifushows="zhifuShowcbFun" @chuanList="handlechuancbList"></cbOrderShowltems>
                        </a-scrollbar>
                        <div v-if="zhangdancbloading" style="position: absolute;width:100%;height:100%;background:rgba(31, 108, 235, 0.04);z-index:10;display:flex;top:0;left:0;justify-content: center;align-items: center;">
                            <a-spin dot :size="10" />
                        </div>
                    </div>
                </div>
            </div>
            <!-- 巡查记录 -->
            <div class="flex_1" v-show="tabs == 'xc'">
                <div class="flex flex_column"  style="height:100%">
                    <div class="flex_1" ref="xcScroll" style="position:relative">
                        <a-scrollbar style="overflow: auto;" :style="{height:xcScrollHeight + 'px'}" @scroll='handlexcScroll'>
                            <div v-if="xunchaList.length != 0">
                                <div class="card" v-for="(item,index) in xunchaList" :key="index">
                                    <div class="flex justify_between align_center marbot12">
                                        <div class="font16 bold">{{item?.user?.nickname}}</div>
                                        <div class="font16 bule">{{item?.created_at}}</div>
                                    </div>
                                    <div class="flex  align_center marbot12">
                                        <div class="font14 heis" style="width:80px">巡查件数</div>
                                        <div class="font14 ">{{item?.number}}</div>
                                    </div>
                                    <div class="flex  marbot12">
                                        <div class="font14 heis" style="width:80px">巡查图片</div>
                                        <div class="flex_1 width0  ">
                                            <a-image-preview-group infinite>
                                                <div class="flex_wrap flex">
                                                    <a-image v-for="(ite,ind) in item?.images" :key="ind" :src="ite" width="80" height="80" style="margin:0 10px 10px 0"/>
                                                </div>
                                            </a-image-preview-group>
                                        </div>
                                    </div>
                                    <div class="flex  align_center marbot12">
                                        <div class="font14 heis" style="width:80px">备注</div>
                                        <div class="font14 ">{{item?.remark}}</div>
                                    </div>
                                </div>
                            </div>
                            <div style="height:100%" v-if="xunchaList.length == 0">
                                <div class="flex justify_center align_center" style="height:100%;width:100%" >
                                    <a-empty />
                                </div>
                            </div>
                        </a-scrollbar>
                        <div v-if="xunchaloading" style="position: absolute;width:100%;height:100%;background:rgba(31, 108, 235, 0.04);z-index:10;display:flex;top:0;left:0;justify-content: center;align-items: center;">
                            <a-spin dot :size="10" />
                        </div>
                    </div>
                </div>
            </div>
            <!-- 编辑记录 -->
            <div class="flex_1" v-show="tabs == 'bj'">
                <div class="flex justify_center align_center" style="height:100%;width:100%" >
                    <a-empty />
                </div>
            </div>
            <!-- 重量修改记录 -->
            <div class="flex_1" v-show="tabs == 'xg'">
                <div class="flex justify_center align_center" style="height:100%;width:100%" >
                    <a-empty />
                </div>
            </div>
            <!-- 创建账单 -->
            <a-modal :mask-closable="false"  v-model:visible="showBill" title="新增账单" :width="1400" :footer="false">
              <chuangjianZD  v-if="showBill" :item="itemData" :type="2" @quxiao="zhangdanshuaxin" @shuaxin="zhangdanshuaxin"></chuangjianZD>
            </a-modal>
            <!-- 创建成本账单 -->
            <a-modal :mask-closable="false"  v-model:visible="showCBBill" title="新增成本账单" :width="1400" :footer="false">
              <chuangjianCBZD  v-if="showCBBill" :item="itemData" :type="2" @quxiao="zhangdanCBshuaxin" @shuaxin="zhangdanCBshuaxin"></chuangjianCBZD>
            </a-modal>
            <!-- 修改账单 -->
            <a-modal :mask-closable="false"  v-model:visible="showxiuagiBill" title="修改账单" @cancel="showxiuagiBill = false" :width="1600" :footer="false">
              <modifybill ref="modifybillRef" v-if="showxiuagiBill" :item="xiugaiItem" :type="2" @quxiao="showxiuagiBill = false" @shuaxin="zhangdanModifyshuaxin"></modifybill>
            </a-modal>
            <!-- 创建红冲账单 -->
            <a-modal :mask-closable="false"  v-model:visible="hongchongShow" title="新增红冲账单" :width="1400" :footer="false">
              <hongchong  v-if="hongchongShow" :item="itemData" :type="2" @quxiao="hongchongZhangdanshuaxin" @shuaxin="hongchongZhangdanshuaxin"></hongchong>
            </a-modal>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted,defineEmits,defineProps,watch } from "vue";
import predictionManage from "@/api/prediction/predictionManage";
import predictionOrder from "@/api/prediction/predictionOrder";
import predictionOrderDetail from "@/api/prediction/predictionOrderDetail";
import OrderShowItems from "@/views/financial/payOrder/orderShowItems.vue"
import cbOrderShowltems from "@/views/financial/payOrder/cbOrderShowltems.vue"


import chuangjianZD from "@/views/prediction/manage/chuangjianZD.vue"
import chuangjianCBZD from "@/views/prediction/manage/chuangjianCBZD.vue"
import modifybill from "@/components/modifybill/index.vue"
import hongchong from "@/views/prediction/manage/hongchong.vue"
import { request } from "@/utils/request.js";
import { Message } from "@arco-design/web-vue";
import { Notification } from "@arco-design/web-vue";

import tool from "@/utils/tool";
import * as common from "@/utils/common";
import commonApi from "@/api/common";
import { useRouter } from 'vue-router'
const router = useRouter()
const emits = defineEmits(['handleXiugai'])
const itemData = ref({})
const orderShowItemsRef = ref();
const orderShowItemscbRef = ref();
const showBill = ref(false)
const showCBBill = ref(false)
const orderShowItems = ref(false)
const zdScrollHeight = ref(0)  // 账单的滚动高度
const zdScroll = ref(null)   //  默认高度
const cbzdScrollHeight = ref(0)  // 成本账单的滚动高度
const cbzdScroll = ref(null)   //  成本默认高度
const xcScrollHeight = ref(0)  // 账单的滚动高度
const xcScroll = ref(null)   //  默认高度
const billItem = ref({
    page:1,
    pageSize:10,
    prediction_id:'',
    type:2
})
const cbbillItem = ref({
    page:1,
    type:'1',
    pageSize:10,
    prediction_id:'',
    type:2
})
const zhifuShow = ref(false)
const zhifucbShow = ref(false)
const xunchaItem = ref({
    page:1,
    pageSize:10,
    prediction_id:'',
    type:1,
})
const zhangdanloading = ref(false)
const zhangdancbloading = ref(false)
const xunchaloading = ref(false)
const billList = ref([])
const billListcb = ref([])

const xunchaList = ref([])
const props = defineProps({
    tabs:{
        type:String,
        default:'jc',
    },
    czsjData:{
      type:Object,
      default:{},
    },
    goods_list:{
      type:Array,
      default:[],
    }
})

const zhangdancaozuo = ref('')
const zhangdancaozuozoon = ref(false)
const xuanzhongPrice = ref(0)
const yixuanList = ref([])


const xiugaiItem = ref({})
const showxiuagiBill = ref(false)
const hongchongShow = ref(false)
const handlexiugaizhangdan = () =>{   // 修改账单
  if(yixuanList.value.length == 0){
    Message.error('请选择要修改的账单')
    return
  }
  let obj = {}
  let arr = []
  billList.value.map((item)=>{
    yixuanList.value.map((ite)=>{
      if(item.id == ite){
        arr.push(item)
      }
    })
  })
  obj.list = arr,
  obj.transport_type = itemData.value.transport_type,
  xiugaiItem.value = obj
  showxiuagiBill.value = true
}
const handleZhangdancaozuozoon = ()=>{
  zhangdancaozuozoon.value = !zhangdancaozuozoon.value
  billList.value.map((item)=>{
    if(zhangdancaozuo.value == 1 && !item.disabled){
      item.flag = zhangdancaozuozoon.value
    }else if(zhangdancaozuo.value == 2){
      item.flag = zhangdancaozuozoon.value
    }else if(zhangdancaozuo.value == 3){
      item.flag = zhangdancaozuozoon.value
    }
  })
  
  yixuanList.value = []
  let price = 0
  billList.value.map((item)=>{
    if(item.flag){
      yixuanList.value.push(item.id)
      price += (item.pay_real_price - 0)
    }
  })
  xuanzhongPrice.value = price.toFixed(2)
}
const handlezhangdancaozuo = (type)=>{
  if(type == 4){
    hongchongShow.value = true
  }else{
    if(zhangdancaozuo.value == type){
      zhangdancaozuo.value = ''
    }else{
      zhangdancaozuo.value = type
      if(type == 1){
        zhangdancaozuozoon.value = false
        yixuanList.value = []
        billList.value.map((item)=>{
          item.flag = false
        })
      }else if(type == 2){
        zhangdancaozuozoon.value = true
        yixuanList.value = []
        billList.value.map((item)=>{
          yixuanList.value.push(item.id)
          item.flag = true
        })
      }else if(type == 3){
        zhangdancaozuozoon.value = true
        yixuanList.value = []
        billList.value.map((item)=>{
          yixuanList.value.push(item.id)
          item.flag = true
        })
      }
      
    }
  }
  
}
const hongchongZhangdanshuaxin = ()=>{
  hongchongShow.value = false
  handleTabs('zd')
}
const zhangdanModifyshuaxin = ()=>{
  showxiuagiBill.value = false
  handleTabs('zd')
}
// 批量显示收据
const handleShouju = ()=>{
  if(yixuanList.value.length == 0){
    Message.error('请选择需要打印的账单')
    return
  }
  let obj = JSON.parse(JSON.stringify(billList.value[0]))
  obj.detail = []
  console.log("billList.value:",billList.value)
  console.log("yixuanList.value:",yixuanList.value)
  billList.value.map((item)=>{
    yixuanList.value.map((ite)=>{
      if(item.id == ite){
        obj.detail.push(...item.detail)
      }
    })
  })
  console.log("obj.detail:",obj.detail)
  let falgTrue = []
  obj.detail.map((item)=>{
    if(falgTrue.length == 0){
      falgTrue.push(item) 
    }else{
      let num = falgTrue.findIndex((ite)=>{
        return ite.pay_name == item.pay_name
      })
      if(num == -1){
        falgTrue.push(item) 
      }else{
        falgTrue[num].pay_real_price = (falgTrue[num].pay_real_price - 0) + (item.pay_real_price - 0)
      }
    }
    
  })
  falgTrue.map((item)=>{
    item.pay_real_price = (item.pay_real_price - 0).toFixed(2)
  })
  obj.detail = falgTrue
  orderShowItemsRef.value.handleShouJu(obj)
}

watch(
  billList,
  (newVal, oldVal) => {
    console.log('数组变化了', newVal)
    
    if(zhangdancaozuo.value){
      let zongList = []
      if(zhangdancaozuo.value == 1){
        billList.value.map((item)=>{
          if(!item.disabled){
            zongList.push(item.id)
          }
        })
      }else{
        billList.value.map((item)=>{
          zongList.push(item.id)
        })
      }
      yixuanList.value = []
      let price = 0
      billList.value.map((item)=>{
        if(item.flag){
          yixuanList.value.push(item.id)
          price += (item.pay_real_price - 0)
        }
      })
      if(yixuanList.value.length == zongList.length){
        zhangdancaozuozoon.value = true
      }else{
        zhangdancaozuozoon.value = false
      }
      xuanzhongPrice.value = price.toFixed(2)
    }
  },
  { deep: true } // 必须设置 deep: true 才能检测数组内部变化
)



onMounted(()=>{
  itemData.value = JSON.parse(JSON.stringify(props.czsjData))
  console.log(itemData.value)
  if(itemData.value.goods_data !== null){
    if (typeof itemData.value.goods_data === 'object' && Array.isArray(itemData.value.goods_data)) {
        
    } else if (typeof itemData.value.goods_data === 'object' && !Array.isArray(itemData.value.goods_data)) {
      itemData.value.goods_data = [itemData.value.goods_data];
    }
  }
  

  if(props.tabs == 'jc'){
    // itemData.value = JSON.parse(JSON.stringify(props.czsjData))
  }else if(props.tabs == 'zd'){
    handleTabs('zd')
  }
  console.log('进入子组件：',props.tabs)
})
const handleChuangjian = ()=>{
  showBill.value = true
  
}
const handleChuangjianCB = ()=>{
  showCBBill.value = true
  
}
const handleGoodName = (id)=>{
  let name = ''
  props.goods_list.map((v,i)=>{
    if(v.id == id){
      name = v.name
    }
  })
  return name
}
const zhangdanshuaxin = ()=>{
  showBill.value = false
  handleTabs('zd')
}
const zhangdanCBshuaxin = ()=>{
  showCBBill.value = false
  handleTabs('cb')
}
const handlezdScroll = (event)=>{
    // 计算是否触底
    let isBottom = (event.target.scrollTop + event.target.clientHeight) >= event.target.scrollHeight
    if (isBottom) {
      // 到达滚动条底部，触发事件
      billItem.value.page++
      handlePayOrderIndex()
    }
}
const handlecbzdScroll = (event)=>{
    // 计算是否触底
    let isBottom = (event.target.scrollTop + event.target.clientHeight) >= event.target.scrollHeight
    if (isBottom) {
      // 到达滚动条底部，触发事件
      cbbillItem.value.page++
      handlePayOrdercbIndex()
    }
}
const handlexcScroll = (event)=>{
    // 计算是否触底
    let isBottom = (event.target.scrollTop + event.target.clientHeight) >= event.target.scrollHeight
    if (isBottom) {
      // 到达滚动条底部，触发事件
      xunchaItem.value.page++
      handleXuncha()
    }
}
const handleZhifu = ()=>{
    let num = billList.value.findIndex((item)=>{
        return item.flag == true
    })
    if(num == -1){
        return Message.error('请选择需要支付的订单')
    }else{
        zhifuShow.value = true
    }
}
const zhifuShowFun = (res)=>{    // 接受账单组件传回来的值
  zhifuShow.value = res
}

const zhifuShowcbFun = (res)=>{    // 接受账单组件传回来的值
  zhifucbShow.value = res
}
const handleTabs = (e)=>{
    emits('handleXiugai',e)
    if(e == "zd"){
      billItem.value.prediction_id = itemData.value.ids.split(',')
      billItem.value.page = 1
      billItem.value.pageSize = 10
      billList.value = []
      zhangdanloading.value = false
      setTimeout(() => {
        zdScrollHeight.value = zdScroll.value.offsetHeight - 40
        handlePayOrderIndex()
      }, 202);
    }else if(e == 'cb'){
      cbbillItem.value.prediction_id = itemData.value.ids.split(',')
      cbbillItem.value.page = 1
      cbbillItem.value.pageSize = 10
      billListcb.value = []
      zhangdancbloading.value = false
      setTimeout(() => {
        cbzdScrollHeight.value = cbzdScroll.value.offsetHeight
        handlePayOrdercbIndex()
      }, 202);
    }
    else if(e=='xc'){
        xunchaItem.value.prediction_id = itemData.value.id
        xunchaItem.value.page = 1
        xunchaItem.value.pageSize = 10
        xunchaList.value = []
        xunchaloading.value = false
        setTimeout(() => {
            xcScrollHeight.value = xcScroll.value.offsetHeight
            handleXuncha()
        }, 202);
    }
}

const handleXunchas = ()=>{
    let objDate = JSON.parse(JSON.stringify(xunchaItem.value))
    objDate.page = 1
    objDate.pageSize = (objDate.page - 1) * objDate.pageSize
    let obj = {}
    for(let key in objDate){
      if(objDate[key]){
        obj[key] = objDate[key]
      }
    }
    xunchaloading.value = true
    request({
        url: '/prediction/log/index',
        method: 'get',
        params:obj
      }).then(res=>{
        if(res.code == 200){
            xunchaloading.value = false
            let _data = res.data.items
            _data.map((v,i)=>{
                if (v.images == '') {
                    v.images = [];
                } else {
                    v.images = v.images.split(',');
                }
            })
            xunchaList.value = _data
        }
    })
}

const handleXuncha = ()=>{
    let obj = {}
    for(let key in xunchaItem.value){
      if(xunchaItem.value[key]){
        obj[key] = xunchaItem.value[key]
      }
    }
    xunchaloading.value = true
    request({
        url: '/prediction/log/index',
        method: 'get',
        params:obj
      }).then(res=>{
        if(res.code == 200){
            xunchaloading.value = false
            let _data = res.data.items
            _data.map((v,i)=>{
                if (v.images == '') {
                    v.images = [];
                } else {
                    v.images = v.images.split(',');
                }
            })
            let list = [...xunchaList.value,..._data]
            xunchaList.value = list
        }
    })
}
const handlechuanList = (index)=>{
  billList.value[index].flag = !billList.value[index].flag
}
const handlechuancbList = (index)=>{
  billListcb.value[index].flag = !billListcb.value[index].flag
}
const handlePayOrderIndexs = ()=>{    // 刷新账单列表
    let objDate = JSON.parse(JSON.stringify(billItem.value))
    objDate.page = 1
    objDate.pageSize = objDate.page * objDate.pageSize
    zhangdanloading.value = true
    objDate.type = 2
    request({
        url: '/financial/payOrder/index',
        method: 'get',
        params:objDate
      }).then(res=>{
        if(res.code == 200){
          zhangdanloading.value = false
          let _data = res.data.items

          _data.map((v,i)=>{
            let arr = []
            let arrs = []
            v.pay_real_price = (v.pay_real_price - 0 ).toFixed(2)
            v.pay_price = (v.pay_price - 0 ).toFixed(2)
            v.detail.map((vv,ii)=>{
              vv.car_nos = '';
              // if(v.prediction_id){
                vv.car_nos = vv.prediction.car_no
                vv.no_tax_price = (vv.no_tax_price - 0 ).toFixed(2)
                vv.tax_price = (vv.tax_price - 0 ).toFixed(2)
                vv.pay_real_price = (vv.pay_real_price - 0 ).toFixed(2)
                vv.pay_price = (vv.pay_price - 0 ).toFixed(2)
                vv.discount_price = (vv.discount_price - 0 ).toFixed(2)
              // }else{
              //   if(v.prediction_order_id != 0 && v.prediction_driver_order_id == 0){  //  补费
              //     vv.car_nos = ''
              //   }else{  // 装车收费
              //     if(vv.order_detail.prediction_id == 0){
              //       vv.car_nos = vv.order_detail.wareuserdetail.car_no
              //     }else{+
              //       vv.car_nos = vv.order_detail.prediction.car_no
              //     }
              //   }
              // }
              if(vv.pay_price != '0.00' && vv.is_confirm == 1){
                arr.push(vv)
              }
            })
            v.detail = handleSOrt(arr)
            let carArr = []
            v.detail.map((vv,ii)=>{
              carArr.push(vv.car_nos)
            })
            var newArr = carArr.filter(function(item,index){
              return carArr.indexOf(item) === index;  // 因为indexOf 只能查找到第一个  
            });
            let numArr = []
            newArr.map((vv,ii)=>{
              let num = 0
              let name = ''
              carArr.map((vvv,iii)=>{
                if(vv == vvv){
                  num++
                  name = vvv
                }
              })
              numArr.push({car_no:name,weizhi:num,weizhizong:num})
            })
            let weizhiArr = []
            let weizhinum = 0
            numArr.map((vv,ii)=>{
              weizhinum += vv.weizhi
              weizhiArr.push({car_no:vv.car_no,weizhi:weizhinum,weizhizong:vv.weizhizong})
            })
            v.detail.map((vv,ii)=>{
              weizhiArr.map((vvv,iii)=>{
                if(vv.car_nos == vvv.car_no){
                  vv.weizhi = vvv.weizhi
                  vv.weizhizong = vvv.weizhizong
                }
              })
            })
            v.disabled = false
            if((v.pay_status == 2 && v.is_wait_check == 1) || v.pay_status != 2){
              v.disabled = true
            }
            v.order_no = v.driver_order?.order_no || ''
            v.flag = false
          })
          billList.value = _data
          console.log(billList.value,'账单数据')
        }
        
      })
  }
  const handleSOrt = (ceshiArr)=>{   //排序
    let arr = []           // 最终数据
    let linshiArr = []     //  未匹配的放数组里
    let linshititle = ''   // 临时变量
    ceshiArr.map((v,i)=>{
      if(i == 0){
        linshititle = v.name
        arr.push(v)
      }else{
        if(linshititle == v.name){
          arr.push(v)
        }else{
          linshiArr.push(v)
        }
      }
    })
    ceshiArr.map((v,i)=>{
      if(linshiArr.length != 0){
        linshiArr.map((vv,ii)=>{
          if(ii == 0){
            linshititle = linshiArr[0].name
            arr.push(linshiArr.shift())
          }else{
            if(linshititle == vv.name){
              arr.push(linshiArr.slice(ii,1))
            }
          }
          
        })
        
      }
    })
    arr.sort((a, b) => a.car_nos.localeCompare(b.car_nos));
    return arr
  }
  const handlePayOrderIndex = ()=>{    // 获取账单
    zhangdanloading.value = true
    request({
      url: '/financial/payOrder/index',
      method: 'get',
      params:billItem.value
    }).then(res=>{
      if(res.code == 200){
        zhangdanloading.value = false
        let _data = res.data.items
        _data.map((v,i)=>{
          let arr = []
          let arrs = []
          v.pay_real_price = (v.pay_real_price - 0 ).toFixed(2)
          v.pay_price = (v.pay_price - 0 ).toFixed(2)
          v.detail.map((vv,ii)=>{
            vv.car_nos = '';
            // if(v.prediction_id){
              vv.car_nos = vv.prediction.car_no
              vv.no_tax_price = (vv.no_tax_price - 0 ).toFixed(2)
                vv.tax_price = (vv.tax_price - 0 ).toFixed(2)
                vv.pay_real_price = (vv.pay_real_price - 0 ).toFixed(2)
                vv.pay_price = (vv.pay_price - 0 ).toFixed(2)
                vv.discount_price = (vv.discount_price - 0 ).toFixed(2)
            // }else{
            //   if(v.prediction_order_id != 0 && v.prediction_driver_order_id == 0){  //  补费
            //     vv.car_nos = ''
            //   }else{  // 装车收费
            //     if(vv.order_detail.prediction_id == 0){
            //       vv.car_nos = vv.order_detail.wareuserdetail.car_no
            //     }else{
            //       vv.car_nos = vv.order_detail.prediction.car_no
            //     }
            //   }
            // }
            if(vv.pay_price != '0.00' && vv.is_confirm == 1){
              arr.push(vv)
            }
          })
          v.detail = handleSOrt(arr)
          let carArr = []
          v.detail.map((vv,ii)=>{
            carArr.push(vv.car_nos)
          })
          var newArr = carArr.filter(function(item,index){
            return carArr.indexOf(item) === index;  // 因为indexOf 只能查找到第一个  
          });
          let numArr = []
          newArr.map((vv,ii)=>{
            let num = 0
            let name = ''
            carArr.map((vvv,iii)=>{
              if(vv == vvv){
                num++
                name = vvv
              }
            })
            numArr.push({car_no:name,weizhi:num,weizhizong:num})
          })
          let weizhiArr = []
          let weizhinum = 0
          numArr.map((vv,ii)=>{
            weizhinum += vv.weizhi
            weizhiArr.push({car_no:vv.car_no,weizhi:weizhinum,weizhizong:vv.weizhizong})
          })
          v.detail.map((vv,ii)=>{
            weizhiArr.map((vvv,iii)=>{
              if(vv.car_nos == vvv.car_no){
                vv.weizhi = vvv.weizhi
                vv.weizhizong = vvv.weizhizong
              }
            })
          })
          v.disabled = false
          if((v.pay_status == 2 && v.is_wait_check == 1) || v.pay_status != 2){
            v.disabled = true
          }
          v.order_no = v.driver_order?.order_no || ''
          v.flag = false
        })
        let list = [...billList.value,..._data]
        billList.value = list
        console.log(billList.value,'账单数据')
        if(list.length != 0){
          orderShowItemsRef.value.handleZhifuInfo(billList.value[0].contract_id)
        }
      }
      
    })
  }
  const handlePayOrderIndexscb = ()=>{    // 刷新账单列表
    let objDate = JSON.parse(JSON.stringify(cbbillItem.value))
    objDate.page = 1
    objDate.pageSize = objDate.page * objDate.pageSize
    zhangdanloading.value = true
    request({
        url: '/financial/costOrder/index',
        method: 'get',
        params:objDate
      }).then(res=>{
        if(res.code == 200){
          zhangdanloading.value = false
          let _data = res.data.items

          _data.map((v,i)=>{
            let arr = []
            let arrs = []
            v.pay_real_price = (v.pay_real_price - 0 ).toFixed(2)
            v.pay_price = (v.pay_price - 0 ).toFixed(2)
            v.detail.map((vv,ii)=>{
              vv.car_nos = '';
              // if(v.prediction_id){
                vv.car_nos = vv.prediction.car_no
                vv.no_tax_price = (vv.no_tax_price - 0 ).toFixed(2)
                vv.tax_price = (vv.tax_price - 0 ).toFixed(2)
                vv.pay_real_price = (vv.pay_real_price - 0 ).toFixed(2)
                vv.pay_price = (vv.pay_price - 0 ).toFixed(2)
                vv.discount_price = (vv.discount_price - 0 ).toFixed(2)
              // }else{
              //   if(v.prediction_order_id != 0 && v.prediction_driver_order_id == 0){  //  补费
              //     vv.car_nos = ''
              //   }else{  // 装车收费
              //     if(vv.order_detail.prediction_id == 0){
              //       vv.car_nos = vv.order_detail.wareuserdetail.car_no
              //     }else{+
              //       vv.car_nos = vv.order_detail.prediction.car_no
              //     }
              //   }
              // }
              if(vv.pay_price != '0.00' && vv.is_confirm == 1){
                arr.push(vv)
              }
            })
            v.detail = handleSOrt(arr)
            let carArr = []
            v.detail.map((vv,ii)=>{
              carArr.push(vv.car_nos)
            })
            var newArr = carArr.filter(function(item,index){
              return carArr.indexOf(item) === index;  // 因为indexOf 只能查找到第一个  
            });
            let numArr = []
            newArr.map((vv,ii)=>{
              let num = 0
              let name = ''
              carArr.map((vvv,iii)=>{
                if(vv == vvv){
                  num++
                  name = vvv
                }
              })
              numArr.push({car_no:name,weizhi:num,weizhizong:num})
            })
            let weizhiArr = []
            let weizhinum = 0
            numArr.map((vv,ii)=>{
              weizhinum += vv.weizhi
              weizhiArr.push({car_no:vv.car_no,weizhi:weizhinum,weizhizong:vv.weizhizong})
            })
            v.detail.map((vv,ii)=>{
              weizhiArr.map((vvv,iii)=>{
                if(vv.car_nos == vvv.car_no){
                  vv.weizhi = vvv.weizhi
                  vv.weizhizong = vvv.weizhizong
                }
              })
            })
            v.disabled = false
            if((v.pay_status == 2 && v.is_wait_check == 1) || v.pay_status != 2){
              v.disabled = true
            }
            v.order_no = v.driver_order?.order_no || ''
            v.flag = false
          })
          billListcb.value = _data
        }
        
      })
  }
  const handlePayOrdercbIndex = ()=>{    // 获取成本账单
    zhangdancbloading.value = true
    request({
      url: '/financial/costOrder/index',
      method: 'get',
      params:cbbillItem.value
    }).then(res=>{
      if(res.code == 200){
        zhangdancbloading.value = false
        let _data = res.data.items
        _data.map((v,i)=>{
          let arr = []
          let arrs = []
          v.pay_real_price = (v.pay_real_price - 0 ).toFixed(2)
          v.pay_price = (v.pay_price - 0 ).toFixed(2)
          v.detail.map((vv,ii)=>{
            vv.car_nos = '';
            vv.car_nos = v.prediction.car_no
            vv.no_tax_price = (vv.no_tax_price - 0 ).toFixed(2)
              vv.tax_price = (vv.tax_price - 0 ).toFixed(2)
              vv.pay_real_price = (vv.pay_real_price - 0 ).toFixed(2)
              vv.pay_price = (vv.pay_price - 0 ).toFixed(2)
              vv.discount_price = (vv.discount_price - 0 ).toFixed(2)
            if(vv.pay_price != '0.00' && vv.is_confirm == 1){
              arr.push(vv)
            }
          })
          v.detail = handleSOrt(arr)
          let carArr = []
          v.detail.map((vv,ii)=>{
            carArr.push(vv.car_nos)
          })
          var newArr = carArr.filter(function(item,index){
            return carArr.indexOf(item) === index;  // 因为indexOf 只能查找到第一个  
          });
          let numArr = []
          newArr.map((vv,ii)=>{
            let num = 0
            let name = ''
            carArr.map((vvv,iii)=>{
              if(vv == vvv){
                num++
                name = vvv
              }
            })
            numArr.push({car_no:name,weizhi:num,weizhizong:num})
          })
          let weizhiArr = []
          let weizhinum = 0
          numArr.map((vv,ii)=>{
            weizhinum += vv.weizhi
            weizhiArr.push({car_no:vv.car_no,weizhi:weizhinum,weizhizong:vv.weizhizong})
          })
          v.detail.map((vv,ii)=>{
            weizhiArr.map((vvv,iii)=>{
              if(vv.car_nos == vvv.car_no){
                vv.weizhi = vvv.weizhi
                vv.weizhizong = vvv.weizhizong
              }
            })
          })
          v.disabled = false
          if(v.is_jiesuan == 1){
            v.disabled = true
          }
          v.order_no = v.driver_order?.order_no || ''
          v.flag = false
        })
        let list = [...billListcb.value,..._data]
        billListcb.value = list
        console.log(billListcb.value,'账单数据')
        if(list.length != 0){
          orderShowItemscbRef.value.handleZhifuInfo(billListcb.value[0].contract_id)
        }
      }
      
    })
  }

const open = (row) =>{
    itemData.value = row
    console.log('操作面板数据：',itemData.value)
}

defineExpose({ open });
</script>
<style lang="less" scoped>
.activetabs{
    border-radius:10px 10px 0 0;
    background:rgba(242, 243, 255, 1);
    border-bottom:4px solid rgba(31, 108, 235, 1);
 }
.scllBox{
    height:100%;
    overflow:auto;
    -ms-overflow-style: none;  /* IE 10+ */
    scrollbar-width: none;  /* Firefox */
}

.scllBox::-webkit-scrollbar {
  display: none;
}
.card{
    border-radius:8px;
    border:1px solid rgba(0,0,0,.15);
    padding:12px;
    margin-bottom:12px;
    &:last-child{
        margin-bottom:0px;
    }
}
</style>
<script>

export default { name: "prediction:caozuoMB" };
</script>
